<template>
  <div class="order" v-if="data">
    <!-- 头部新的导航栏部分 -->
    <order-header />
    <!-- <div class="order_header">
      <div class="order_header_img">
        <img src="/image/logo.png" alt="" />
      </div>
      <div class="order_header_content">
        <a href="" class="active">登录</a>
        <span>|</span>
        <a href="" class="active">注册</a>
        <span>|</span>
        <a href="">我的SN</a>
        <span>|</span>
        <a href="">帮助中心</a>
        <span>|</span>
        <a href="" class="active">888-8668-888</a>
      </div>
    </div> -->
    <!-- 步骤条 -->
    <div class="order_step_center">
      <div class="order_step">
        <div class="order_one">
          <span>1</span>
          <p>挑选车型</p>
        </div>
        <div class="order_two">
          <span>2</span>
          <p>填写与核对订单</p>
        </div>
      </div>
      <div class="order_step_last">
        <div class="order_three">
          <span>3</span>
          <p>成功提交</p>
        </div>
      </div>
    </div>
    <!-- 订单车辆信息 -->
    <div class="order_car">
      <!-- 左边栏 -->
      <div class="order_car_left">
        <img :src="this.data[0].car_img" alt="" />
        <span>租期:{{ this.day }}天</span>
      </div>
      <!-- 右边栏 -->
      <div class="order_car_right">
        <div class="order_car_r_top">
          <span>{{ this.data[0].car_name }}</span>
          <a href="javascript:;" @click="goBack">返回修改></a>
        </div>
        <div class="order_car_r_body">
          <div class="left_body">
            <p>取车地点</p>
            <span>取车门店:河南省三门峡市</span>
            <span>取车时间:{{ this.rentTime }}</span>
            <span>取车地址:{{ this.location }}</span>
          </div>
          <div class="right_body">
            <p>还车地点</p>
            <span>还车门店:河南省三门峡市</span>
            <span>还车时间:{{ this.returnTime }}</span>
            <span>还车地址:{{ this.location }}</span>
          </div>
          <div class="order_car_r_last">
            <p>订单说明:</p>
            <span
              >不限公里数，超时费按车辆租赁费及门店服务费均价÷6收取实际超期小时费
              (部分0元活动订单，按照40元/小时进行收取)。</span
            >
            <i>温馨提示:请阅读您所在城市限行规则</i>
          </div>
        </div>
      </div>
    </div>
    <!-- 优惠活动 -->
    <div class="yhhd">优惠活动</div>
    <div class="yhhd_radio">
      <el-radio v-model="radio" label="1">使用优惠码编码</el-radio>
      <el-radio v-model="radio" label="2">一嗨会员专享优惠</el-radio>
      <el-radio v-model="radio" label="3">合作专享优惠</el-radio>
      <el-radio fill="#cccccc" text-color="#cccccc" v-model="radio" label="4"
        >不参加以上任何活动</el-radio
      >
    </div>
    <!-- 其他服务 -->
    <div class="qtfw">
      <p>其他服务</p>
      <span>基本保障服务说明></span>
    </div>
    <div class="qtfw_radio">
      <ul class="addlist">
        <li>
          <input
            type="checkbox"
            :data-unitprice="30 * this.day"
            @change="changebox"
          />
          <div class="add_left">
            <span>行无忧</span>
            <img src="/image/order.png" alt="" />
          </div>
          <div class="add_price">
            <span>30 * {{ this.day }}</span>
          </div>
          <div class="total_price">
            <p>￥{{ 30 * this.day }}</p>
          </div>
        </li>
        <li>
          <input
            type="checkbox"
            :data-unitprice="53 * this.day"
            @change="changebox"
          />
          <div class="add_left">
            <span>优享补充保障</span>
            <img src="/image/order.png" alt="" />
            <p>增强三者保障至30万+5000元以下的车损免赔</p>
            <i class="red">购买立享行无忧8折</i>
            <i class="orange">限时特惠</i>
          </div>
          <div class="add_price">
            <span>53 * {{ this.day }}</span>
          </div>
          <div class="total_price">
            <p>￥{{ 53 * this.day }}</p>
          </div>
        </li>
        <li>
          <input
            type="checkbox"
            :data-unitprice="95 * this.day"
            @change="changebox"
          />
          <div class="add_left">
            <span>百万补充保障</span>
            <img src="/image/order.png" alt="" />
            <p>增强三者保障至100万+5000元以下的车损免赔</p>
            <i class="red">购买立享行无忧8折</i>
            <i class="orange">限时特惠</i>
          </div>
          <div class="add_price">
            <span>95 * {{ this.day }}</span>
          </div>
          <div class="total_price">
            <p>￥{{ 95 * this.day }}</p>
          </div>
        </li>
        <li>
          <input type="checkbox" data-unitprice="50" @change="changebox" />
          <div class="add_left">
            <span>免除加油服务费</span>
            <!-- <img src="/image/order.png" alt="" /> -->
          </div>
          <div class="add_price">
            <!-- <span>30 * 2</span> -->
          </div>
          <div class="total_price">
            <p>￥50</p>
          </div>
        </li>
        <li>
          <input type="checkbox" data-unitprice="30" @change="changebox" />
          <div class="add_left">
            <span>租手机支架</span>
            <!-- <img src="/image/order.png" alt="" /> -->
          </div>
          <div class="add_price">
            <!-- <span>30 * 2</span> -->
          </div>
          <div class="total_price">
            <p>￥30</p>
          </div>
        </li>
        <li>
          <input type="checkbox" data-unitprice="30" @change="changebox" />
          <div class="add_left">
            <span>购买手机支架</span>
            <!-- <img src="/image/order.png" alt="" /> -->
          </div>
          <div class="add_price">
            <!-- <span>30 * 2</span> -->
          </div>
          <div class="total_price">
            <p>￥30</p>
          </div>
        </li>
        <li>
          <input type="checkbox" data-unitprice="30" @change="changebox" />
          <div class="add_left">
            <span>购买自拍杆</span>
            <!-- <img src="/image/order.png" alt="" /> -->
          </div>
          <div class="add_price">
            <!-- <span>30 * 2</span> -->
          </div>
          <div class="total_price">
            <p>￥30</p>
          </div>
        </li>
        <li>
          <input type="checkbox" data-unitprice="25" @change="changebox" />
          <div class="add_left">
            <span>购买数据线</span>
            <!-- <img src="/image/order.png" alt="" /> -->
          </div>
          <div class="add_price">
            <!-- <span>30 * 2</span> -->
          </div>
          <div class="total_price">
            <p>￥60</p>
          </div>
        </li>
        <li>
          <input type="checkbox" data-unitprice="40" @change="changebox" />
          <div class="add_left">
            <span>租行车记录仪</span>
            <!-- <img src="/image/order.png" alt="" /> -->
          </div>
          <div class="add_price">
            <!-- <span>30 * 2</span> -->
          </div>
          <div class="total_price">
            <p>￥60</p>
          </div>
        </li>
        <li>
          <input type="checkbox" data-unitprice="39" @change="changebox" />
          <div class="add_left">
            <span>购买U型枕</span>
            <!-- <img src="/image/order.png" alt="" /> -->
          </div>
          <div class="add_price">
            <!-- <span>30 * 2</span> -->
          </div>
          <div class="total_price">
            <p>￥60</p>
          </div>
        </li>
        <li>
          <input
            type="checkbox"
            value="15"
            v-model="last"
            data-unitprice="15"
            @change="changebox"
          />
          <div class="add_left">
            <span>购买洗漱收纳盒</span>
            <!-- <img src="/image/order.png" alt="" /> -->
          </div>
          <div class="add_price">
            <!-- <span>30 * 2</span> -->
          </div>
          <div class="total_price">
            <p>￥15</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 备注信息 -->
    <div class="bzxx">备注信息</div>
    <!-- 费用明细 -->
    <div class="fymx">
      <div class="fymx_top">
        <span>费用明细</span>
      </div>
      <div class="fymx_body">
        <div class="body_01">
          <p>车辆租赁费以及门店服务费</p>
          <span>￥{{ this.price }}</span>
          <!-- 传递过来的日租价格*天数 -->
        </div>
        <div class="body_02">
          <p>基本保障服务费</p>
          <span>￥{{ 50 * this.day }}</span>
          <i>基本保障服务费50元*{{ this.day }}天</i>
        </div>
        <div class="body_03">
          <p>其他服务</p>
          <span>￥{{ this.day * 10 }}</span>
        </div>
        <div class="body_04">
          <ul>
            <li>
              <span>车辆押金<i>(可退)</i></span>
              <p>￥3000</p>
            </li>
            <li>
              <span>违章押金<i>(可退)</i></span>
              <p>￥2000</p>
            </li>
          </ul>
        </div>
        <div class="total_p">
          <p>
            总计: <em>￥</em
            ><span>{{ total * 1 + this.day * 50 + this.day * 10 }}</span>
          </p>
          <button @click="goOrderSuc()">提交订单</button>
        </div>
        <div class="body_last">
          首次租车请使用本人信用卡，本人二代有效身份证，本人有效地方驾驶证正副本。
          本订单仅为客户租车预约登记，提交该订单后，客户需要到门店办理具体租车手续，具体权利义务以签署的合同为准。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderHeader from "../components/OrderHeader.vue";
export default {
  components: { OrderHeader },
  data() {
    return {
      radio: 1,
      total_price: this.price,
      last: "",
      data: null,
      sum: 0,
      orderID:null
    };
  },
  mounted() {
    // console.log("天数" + this.day);
    // console.log("location:" + this.location);
    // console.log("汽车ID号码" + this.id);
    // console.log("租车时间" + this.rentTime);
    // console.log("还车时间" + this.returnTime);
    // console.log("还车时间" + this.price);
    this.getcardata(this.id);
  },
  props: ["day", "location", "rentTime", "id", "returnTime", "price"],
  methods: {
    goOrderSuc() {
      // console.log(this.sum);
      let user_id = sessionStorage.getItem('UserID')
      if(!user_id){
        // 没有用户ID 说明未登录状态
        alert('登录已失效，请重新登录')
        //跳转
        return
      }
      // console.log('提交成功')
      let codes = Math.floor(Math.random() * 9999999999, 10000000000);
      let is_suc = '已取消'
      let params = `order_id=${null}&order_code_id=${codes}&order_renttime=${this.rentTime}&order_returntime=${this.returnTime}&order_carlocation=${this.location}&ocar_id=${this.id}&ouser_id=${user_id}&order_success=${is_suc}&order_day=${this.day}&order_price=${(this.total_price*1) + (this.day*50) + (this.day*10)}`;
      
      // let param= `${null}&"${codes}"&"${this.rentTime}"&"${this.returnTime}"&"${this.location}"&${this.id}&${user_id}&"${0}"&${this.day}&${(this.total_price*1) + (this.day*50) + (this.day*10)}`
      this.axios.post("/order/submitorder",params).then((res) => {
        // console.log(res.data.code);
        if(res.data.code==200){
          this.orderID=res.data.data.insertId
      this.$router.push(`/ordersuccess/${this.total_price}/${this.orderID}`);
        }
      });
    },
    changebox(e) {
      // console.log(e.target.checked);
      // console.log(e.target.dataset.unitprice);
      let jiage = e.target.dataset.unitprice;
      // console.log(jiage)
      if (e.target.checked) {
        let Price = this.total_price * 1;
        Price += jiage * 1;
        this.total_price = Price;
      } else {
        this.total_price -= jiage * 1;
        // console.log(this.total_price);
      }
    },
    goBack() {
      this.$router.push("/cartsearch");
    },
    getcardata(id) {
      // console.log(object)
      this.axios.get(`/car/detailcar?id=${id}`).then((res) => {
        // console.log(res.data.data);
        this.data = res.data.data;
      });
    },

  },
  computed: {
    total() {
      return this.total_price;
    },
  },
};
</script>

<style src="../assets/css/order.css" scoped></style>
<style lang="scss" scoped></style>
